<template>
	<view class="operate-container">
		<scroll-view 
			class="record-list"
			scroll-y
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			@refresherrefresh="onRefresh"
			:refresher-triggered="isRefreshing"
			refresher-background="#f5f5f5"
		>
			<view class="record-item" v-for="(record, index) in recordList" :key="index">
				<view class="record-header">
					<text class="date">{{ record.operateDate }}</text>
					<text :class="['source', `source-${record.source}`]">{{ getSourceText(record.source) }}</text>
				</view>
				
				<view class="record-content">
					<view class="info-row">
						<text class="label">服务技师</text>
						<text class="value">{{ record.technician }}</text>
					</view>
					<view class="info-row">
						<text class="label">脱毛部位</text>
						<text class="value">{{ record.bodyPart }}</text>
					</view>
					<view class="info-row">
						<text class="label">备注信息</text>
						<text class="value">{{ record.remark || '无' }}</text>
					</view>
				</view>
			</view>
			
			<view class="loading-more" v-if="recordList.length > 0">
				<view v-if="hasMore" class="loading">
					<view class="loading-icon"></view>
					<text>加载中...</text>
				</view>
				<text v-else class="no-more">没有更多了</text>
			</view>
			
			<view class="empty-state" v-if="recordList.length === 0">
				<image src="/static/images/index_page.png" mode="aspectFit"></image>
				<text>暂无脱毛记录</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [],
				page: 1,
				pageSize: 10,
				hasMore: true,
				isRefreshing: false,
				sourceMap: {
					'card': '会员卡',
					'meituan': '美团',
					'douyin': '抖音',
					'wechat': '微信',
					'other': '其他'
				},
				isLoading: false
			}
		},
		methods: {
			getSourceText(source) {
				return this.sourceMap[source] || '未知'
			},
			
			async getRecordList() {
				try {
					// 模拟记录数据
					const mockRecords = [
						{
							id: 1,
							operateDate: '2024-03-20 14:30',
							technician: '小美',
							bodyPart: '全身',
							source: 'card',
							remark: '皮肤状态良好'
						},
						{
							id: 2,
							operateDate: '2024-03-15 10:00',
							technician: '小丽',
							bodyPart: '腋下',
							source: 'meituan',
							remark: '需要注意敏感区域'
						},
						{
							id: 3,
							operateDate: '2024-03-10 16:00',
							technician: '小红',
							bodyPart: '比基尼',
							source: 'douyin',
							remark: ''
						},
						{
							id: 4,
							operateDate: '2024-03-05 11:30',
							technician: '小芳',
							bodyPart: '手臂',
							source: 'wechat',
							remark: '客户要求温和模式'
						},
						{
							id: 5,
							operateDate: '2024-02-28 15:00',
							technician: '小云',
							bodyPart: '大腿',
							source: 'other',
							remark: '首次体验'
						}
					];

					// 模拟分页
					const startIndex = (this.page - 1) * this.pageSize;
					const endIndex = startIndex + this.pageSize;
					const pageData = mockRecords.slice(startIndex, endIndex);
					
					if (this.page === 1) {
						this.recordList = pageData;
					} else {
						this.recordList = [...this.recordList, ...pageData];
					}
					
					this.hasMore = endIndex < mockRecords.length;
				} catch (e) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			
			async loadMore() {
				if (!this.hasMore || this.isLoading) return
				this.isLoading = true
				
				try {
					await this.getRecordList()
				} finally {
					this.isLoading = false
				}
			},
			
			async onRefresh() {
				if (this.isRefreshing) return
				this.isRefreshing = true
				this.page = 1
				
				try {
					await this.getRecordList()
				} finally {
					this.isRefreshing = false
				}
			}
		},
		
		onLoad() {
			this.getRecordList()
		}
	}
</script>

<style lang="scss" scoped>
.operate-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	
	.record-list {
		.record-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.record-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;
				
				.date {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
				
				.source {
					font-size: 24rpx;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					
					&.source-card {
						background: #e6f3ff;
						color: #007AFF;
					}
					
					&.source-meituan {
						background: #fff3e6;
						color: #ff9500;
					}
					
					&.source-douyin {
						background: #f5e6ff;
						color: #a374ff;
					}
					
					&.source-wechat {
						background: #e6ffe6;
						color: #34c759;
					}
					
					&.source-other {
						background: #f5f5f5;
						color: #8e8e93;
					}
				}
			}
			
			.record-content {
				.info-row {
					display: flex;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						width: 140rpx;
						font-size: 26rpx;
						color: #666;
					}
					
					.value {
						flex: 1;
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}
		
		.loading-more {
			padding: 30rpx 0;
			text-align: center;
			
			.loading {
				display: inline-flex;
				align-items: center;
				
				.loading-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
					border: 2rpx solid #999;
					border-color: #999 transparent transparent transparent;
					border-radius: 50%;
					animation: loading 1s infinite linear;
				}
				
				text {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.no-more {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.empty-state {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			color: #999;
			font-size: 28rpx;
		}
	}
}

@keyframes loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

:deep(.uni-scroll-view-refresh) {
	.uni-scroll-view-refresh__spinner {
		color: #000000 !important;
	}
	
	.uni-scroll-view-refresh__text {
		color: #666666 !important;
	}
}
</style>
